<template>
  <div class="content">
    <h3>基础调用</h3>
    <Teleport to="#m-dialog">
      <!-- title="标题" @onOk="handleOk" -->
      <model-dialog :visible="visible" @onClose="handleCloseDialog" v-dialogdrag>
        <template #header>
          <div>title</div>
        </template>
        <template #test>
          <div class="m-info">
            <span class="m-msg">你好！</span>
          </div>
        </template>
      </model-dialog>
    </Teleport>
    <button @click="handleShowDialog">按钮</button>
    <h3>自定义按钮</h3>
    <Teleport to="#m-dialog">
      <!-- title="标题" @onOk="handleOk" -->
      <model-dialog
        :visible="visible1"
        @onClose="handleCloseDialog1"
        :cancel="'左按钮'"
        :confirm="'右按钮'"
      >
        <template #header>
          <div>title1</div>
        </template>
        <template #test>
          <div class="m-info">
            <span class="m-msg">你好123！</span>
          </div>
        </template>
      </model-dialog>
    </Teleport>
    <button @click="handleShowDialog1">自定义按钮</button>
  </div>
</template>
<script>
import { ref } from "vue";
import modelDialog from "@/components/model-dialog.vue";

export default {
  setup() {
    const visible = ref(false);
    const visible1 = ref(false);

    const handleShowDialog = () => {
      visible.value = true;
    };

    const handleShowDialog1 = () => {
      visible1.value = true;
    };

    const handleCloseDialog = () => {
      console.log;
      visible.value = false;
    };
    const handleCloseDialog1 = () => {
      visible1.value = false;
    };
    return {
      visible,
      visible1,
      handleShowDialog,
      handleShowDialog1,
      handleCloseDialog,
      handleCloseDialog1,
    };
  },
  components: {
    modelDialog,
  },
};
</script>
<style lang="scss" scoped>
.el-overlay-dialog {
  overflow: hidden;
}
</style>